<template>
  <div class="flex">
    <h2 class="text-center">{{ detail.title }}</h2>
  </div>
</template>

<script>
export default {
  name: 'listItem',
  data() {
    return {
      detail: {
        title: "detailTitle",
      },
    };
  },
  beforeRouteUpdate(to) {
    let obj = { title: to.query.id };
    this.initInfo(obj);
  },
  methods: {
    initInfo(data, vm) {
      if (vm) {
        vm.detail = data;
        return;
      }
      this.detail = data;
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      let obj = { title: to.query.id };
      vm.initInfo(obj, vm);
    });
  },
};
</script>

<style>
</style>
